<template >
	<view :class="leng<=4?'contonts':'contont'" style="background-color: #F5F5F5;		
		overflow: auto;">
		<view class="" v-if="xinxi==true" style="background-color: #FFFFFF;width: 100%;height: 100%;background: #F5F5F5;" v-show="order==true">
			<view style="display: flex;align-items: center;flex-direction: column;" >
				<image src="../../static/img/pic_denglu.png" mode="" style="width: 136px;height:136px;margin-top: 20px;"></image>
				<text style="color: #000000;font-size: 18px;font-weight: 500;margin-top: 15px;">暂未登录</text>
				<text style="color: #777777;font-size: 15px;margin-top: 12px;">你还未登录，即将为你跳转登录页面~</text>
			</view>
		</view>
		<view class="" v-if="xinxi==false">
			
		<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;" v-if="list.length==0">
			<image src="../../static/img/pic_shuju.png" mode="" style="width: 94px;height: 98px;margin-top: 55px;"></image>
			<text style="color: #000000;font-size: 18px;font-weight: 500;margin-top: 19px;">暂无订单数据</text>
			<text style="color: #777777;font-size: 15px;margin-top: 10px;">你可以尝试下拉刷新获取即时订单！</text>
		</view>
		<!-- 接单 -->
		<view class="receipt"  v-for="(v,i) in list" :key="i" v-if="list.length!=0">
			<view class="reced" @click="way(i)" v-if="v.driverstatus==1">
				<view  style="font-size: 16px; font-weight: 500;display: flex;">
					<text style="margin-left: 15px;width: 100px;
					overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap
					">{{v.startstationname}}</text>
				<image src="../../static/img/icon_zdz.png" mode="" style="width: 30px; height: 14px;margin-left: 8px;margin-top:5px ;"></image>
				<text style="margin-left: 12px;width: 100px;
				overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap 
				">{{v.endstationname}}</text>
				</view>
				<!-- <image src="../../static/img/bge_ch@2x.png" mode="" style="width: 72px;height: 36px;"></image> -->
			</view>
			<view style="display: flex;height: 32px;font-size: 12px; color: #777777;justify-content: space-between;align-items: center;" @click="way(i)" v-if="v.driverstatus==1">
				<text style="font-size: 12px; color: #777777;margin-left: 15px;">联系人：{{v.esusername}}</text>
				<view style="margin-right: 10px;height: 100%;display: flex;justify-content: space-between;align-items: center;">
					<image src="../../static/img/icon_dianhua.png" mode="" style="width: 10px; height: 10px;margin-right: 3px; "></image>
					<text >{{v.mobile}}</text>
				</view>
			</view>
			<view style="height: 20px;display: flex;" @click="way(i)" v-if="v.driverstatus==1">
				<text class="recnum" style="margin-left: 15px;">{{v.unitPrice}}元/{{add[i].weightName}}</text>
				<text class="recnum">
					<text >{{add[i].piece}}{{add[i].weightName}}</text>
				</text>
			</view>
			<view class="butnum" v-if="v.driverstatus==1">
				<text style="color:#FE0700;font-size: 16px;font-weight: 500;margin-left: 12px;">¥{{v.totalmoney}}</text>
				<view style="display: flex;">
					<!-- <button style="width: 76px; height: 30px;color: #77839E;background: #F2F3F6; font-size: 12px;margin-right: 10px;" @click="refusal(i)">拒单</button> -->
					<button style="width: 76px; height: 30px;color: #FFFFFF;background: #042A58; font-size: 12px;margin-right: 10px;" @click="startlist(i)">接单</button>
				</view>
				
			</view>
		
		<!-- 发车 -->
		<view  v-if="list[i].driverstatus!=1">
		
			<view style="display: flex;height: 34px;font-size: 12px; color: #777777;justify-content: space-between;align-items: center;" @click="way(i)">
				<text style="margin-left: 15px;">
					<image src="../../static/img/icon_hc.png" mode="" style="width: 20px; height: 14px;"></image>
					发货方：{{v.esusername}}</text>
				<view style="margin-right: 10px;height: 100%;display: flex;justify-content: space-between;align-items: center;">
					<image src="../../static/img/icon_dianhua.png" mode="" style="width: 10px; height: 10px;margin-right: 3px; "></image>
					<text >{{v.mobile}}</text>
				</view>
			</view>
			<view style="height: 59px;display: flex;align-items: center;justify-content: center;flex-direction: column;"  @click="way(i)">
				<view style="display: flex;">
					<text style="margin-left: 15px;width: 100px;
					overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap
					">{{v.startstationname}}</text>
					<image src="../../static/img/icon_zdz.png" mode="" style="width: 30px;height: 14px;margin: 0 15px;margin-top: 4px;"></image>
					<text style="margin-left: 12px;width: 100px;
					overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap
					">{{v.endstationname}}</text>
				</view>
			</view>
			<view class="butnum">
				<text style="color:#FE0700;font-size: 16px;font-weight: 500;margin-left: 12px;">¥{{v.totalmoney}}</text>
				<view class="" style="display: flex; ">
					<!-- <button style="width: 76px; height: 30px;color: #77839E;background: #F2F3F6; font-size: 12px;margin-right: 10px;"  @click="maskd=true">确认价格</button> -->
				<button style="width: 76px; height: 30px;color: #FFFFFF;background: #145CF2; font-size: 12px;margin-right: 10px;" v-show="v.driverstatus==2" @click="start(i)">发车</button>
				<button style="width: 76px; height: 30px;color: #FFFFFF;background: #00A56C; font-size: 12px;margin-right: 10px;"	v-show="v.driverstatus==3" @click="startend(i)">到货确认</button>
				<button style="width: 76px; height: 30px;color: #FFFFFF;background: #BE9E6E; font-size: 12px;margin-right: 10px;" v-show="v.driverstatus==4"  @click="staruplod(i)">上传回单</button>
				</view>
				
			</view>
		</view>
		</view>
<!-- 		<view class="mask" v-show="maskd" >
			<view class="masks">
				<view style="height: 40px;width: 100%;margin-top: 4px;display: flex;align-items: center;justify-content: space-between;">
					<text style="margin-left: 20px;font-size: 14px;">确认价格方案</text>
					<image src="../../static/img/icon_gb@2x.png" mode="" style="width: 40px;height: 40px;margin-right: 4px;" @click="maskd=false"></image>
				</view>
				<view class="masker">
					<text style="color: #4A4A4A;margin-top: 20px;margin-left: 30px;">总运费:550</text>
					<text style="color: #FF0700;font-weight: 500;margin-top: 14px;margin-left: 30px;">线上支付运费：550</text>
				</view>
				<view class="but" style="display: flex;align-items: center;justify-content:space-around;width: 100%;" >
					<button class="butone" @click="maskd=false">拒绝变更</button>
					<button class="buttwo"  @click="maskd=false">同意变更</button>
				</view>
			</view>
		</view> -->
		<image src="../../static/img/icon_saoma.png" mode="" style="width: 90px;height: 90px;position: fixed;right: 0;bottom: 70px;" @click="tel"></image>
		<view class="mask"  v-show="maskers" v-if="contactBankNo==0">
			<view class="masks"  >
				<view style="height: 40px;width: 100%;margin-top: 4px;display: flex;align-items: center;justify-content: space-between;">
					<text style="margin-left: 20px;font-size: 14px;">交易完成后，运费将打款至以下银行卡</text>
					<image src="../../static/img/icon_gb.png" mode="" style="width: 40px;height: 40px;margin-right: 4px;" @click="maskers=false"></image>
				</view>
				<view class="masked" >
					<image src="../../static/img/bg_dk@2x.png" style="width: 355px;height: 100px;;" mode=""></image>
					<text style="color: #4A4A4A;margin-top: 25px;margin-left: 20px;font-size: 18px;color: #042A58; font-weight: 500;position: absolute;">{{card.bankAccountNumber}}</text>
					<text style="color: #627995;font-weight: 500;margin-top: 16px;display: flex;position: absolute;bottom: 110px;left: 0px;">
						<text style="margin-left: 23px;">{{card.bankUserName}}</text>
						<text style="margin-left: 50px;">{{card.card_no}}</text>
					</text>
				</view>
					<button class="butone" style="
					width:355px;
					height:50px;
					background:rgba(4,42,88,1);
					border-radius:8px;
					margin-top: 20px;
					color: #FFFFFF;
					" @click="maskstart">确认使用</button>
			</view>
		</view>
		<view class="mask"  v-show="maskers" v-if="contactBankNo==1">
			<view class="masks"  >
				<view style="height: 40px;width: 100%;margin-top: 4px;display: flex;align-items: center;justify-content: space-between;">
					<text style="margin-left: 20px;font-size: 14px;">交易完成后，运费将打款至以下银行卡</text>
					<image src="../../static/img/icon_gb.png" mode="" style="width: 40px;height: 40px;margin-right: 4px;" @click="maskers=false"></image>
				</view>
				<view class="masked" style="position: relative;">
					<image src="../../static/img/bg_dk@2x.png" style="width: 355px;height: 100px;;" mode=""></image>
					<text style="position: absolute;top:38px;left: 60px;color:#042A58;font-size: 18px;font-weight: 500;">订单将结算至车队长绑定卡号</text>
				</view>
					<button class="butone" style="
					width:355px;
					height:50px;
					background:rgba(4,42,88,1);
					border-radius:8px;
					margin-top: 20px;
					color: #FFFFFF;
					" @click="maskstart">确认使用</button>
			</view>
		</view>
		<view class="loading"  v-if="list.length>=5">
			{{loadingTxt}}
		</view>
		</view>
	</view>
</template>

<script>
	import {ajax} from '../../api.js'
	import {ajaxs} from "../../apis.js"
	import {Deiverapi} from "../../Deiverapi.js"
	import {Deiverapis} from "../../Deiverapis.js"
	var page=1; var timer=null ;var that=this
	export default {
		data() {
			return {
				maskd:false,
				maskers:false,
				receipted:true,
				timers:"2018.06.19发车",
				but:0,
				list:[],
				add:[],
				loadingTxt:"加载更多",
				card:[],
				id:"",
				ids:"",
				leng:"",
				contactBankNo:0,
				xinxi:true,
				carts:[],
				order:false,
			}
		},
		onLoad() {
	var that=this
	if(this.list.length==0){
		this.loadingTxt=="暂无数据"
	}else{
		this.loadingTxt=="加载更多"
	}
				// this.getNews()
				  uni.startPullDownRefresh() 
		// ajax({
		// 	url:"/v1/driver/order/newlist",
		// 	method:"post",
		// 	success(res){
		// 		console.log(res)
		// 	}
		// })	
		},
		onShow: function() {
			var that=this
				uni.getStorage({
					key:"name",
					success(res) {
						that.carts=res.data
						Deiverapis({
						url:"/appdriver/loginsubmit",
								data:{
											phone:res.data.phone,
											password:res.data.pass
											},
											success(res) {
											if(res.data.status=="OK"){
												uni.setStorageSync("sessionid", res.header["Set-Cookie"])
												var name={state:res.data.status,phone:that.carts.phone,pass:that.carts.pass}
													uni.setStorage({
														key:"name",
														data:name
													})
											}else{
												var name=[res.data.status,that.carts.phone,that.carts.pass]
												that.order=true
											uni.showToast({
		 								    title: '正在前往登录请稍后',
												icon:"none"
											})
											
											setTimeout(function(){
												uni.reLaunch({
													url:"../index/index"
												})
											},1000)
												
											}				
											},
										
						})
					}, 
					fail() {
						that.order=true
						uni.showToast({
						    title: '正在前往登录请稍后',
							icon:"none"
						})
						setTimeout(function(){
							uni.reLaunch({
								url:"../index/index"
							})
						},800)
					}
					
				})
				uni.showLoading({
				    title: '获取数据中！'
				});
				
			this.getNews()
		},
		onPullDownRefresh() {
			this.getNews()
		},
		onReachBottom() {
			var that=this
			this.getMoreNews()
			
		},
		filters:{
					 addZero(data){
						 return data.toFixed(2)
					 }
		},
		methods: {
			// 扫码
			tel(){
				var that=this
				uni.scanCode({
					// replace(/[^0-9]/ig,"")
									success:function(res){
										uni.navigateTo({
											url:"../Sweepcode/Sweepcode?id="+ Object.values(res)[1].substring(26).replace(/[^0-9]/ig,"")
										})
									}
								});

			},
			// 运单详情
			way(i){
				uni.navigateTo({
					url:"../Waybilldetails/Waybilldetails?id="+this.list[i].id+"&&type="+this.list[i].type
				})
			},
			// 加载
			getMoreNews(){
				this.loadingTxt="加载中"
				var that=this 
					  uni.showNavigationBarLoading()
					ajaxs({
					      url: "/v1/driver/order/newlist",
							method:"post",
							data:{offect:page,
						limit:1
							},		  
					      success(res) {
							  if(that.list.length==res.data.total){
								  that.loadingTxt="已经全部加载"
								     uni.hideNavigationBarLoading()
								  return false
							
							  }
							   uni.hideNavigationBarLoading()
					  var list=res.data.list
				
					  that.list=that.list.concat(list)
					  res.data.list.forEach(function(v,i){
					  						  that.add=that.add.concat(JSON.parse(v.goodsjson))
											
					  })
					  uni.stopPullDownRefresh()
					  page++
					  that.loadingTxt="加载更多"
					      //请求成功的处理
					      },
						
					    })
			},
			getNews(){
				var that=this
				page=1;
					  uni.showNavigationBarLoading()
					  setTimeout(function(){
					  ajaxs({
					      url: "/v1/driver/order/newlist",
							method:"post",
						data:{offect:page,
						limit:10
						},
					   success(res) {
							    uni.hideLoading()
								if(res.data.status=="OK"){
									that.xinxi=false
									that.list=res.data.list
									that.leng=that.list.length
								}
					
					  res.data.list.forEach(function(v,i){
						  that.add=that.add.concat(JSON.parse(v.goodsjson))
					  })
					 uni.stopPullDownRefresh()
					  uni.hideNavigationBarLoading()
					  page++
					    
					      },
						fail() {
							uni.hideNavigationBarLoading();
							uni.showToast({
							    title: '数据加载出错,请检查网络',
								icon:"none"
							})
						}
					    })
						},500)
			},
			// 拒单
			refusal(i){
			var that=this
				uni.showModal({
				    content: '	拒单后将无法在接收该订单，请 确认是否拒单？',				
				   success: function (res) {
				     if (res.confirm) {//这里是点击了确定以后
				   			ajax({
				   				url:"//v1/driver/order/updateDriverstatus",
				   				method:"post",
				   				data:{
				   					id:that.list[i].id,
				   					driverstatus:6
				   				},
				   				success(res){
				   				
				   				}
				   			})
				     } else {//这里是点击了取消以后			
				       		
				     }
				   				
				   }			
				    })
			},
			// 接单
			startlist(i){
				var that=this
				// 车辆
				ajax({
					url:"/v1/appdriver/user/carprofile",
					method:"post",
					success(res){
						if(res.data.message.carnum==""){
							uni.navigateTo({
								url:"../cart/carts?id=1"
							})
						}else 	{		
							ajaxs({
								url:"/v1/driver/bind/bankCard",
								method:"post",
								data:{
									orderId:that.list[i].id
								},
								success(res){
									if(res.data.message==null){
										ajax({
											url:"/v1/appdriver/user/carprofile",
											success(res){
												
												if(res.data.message.bankUserName==""||res.data.message.bankUserName==null){
													uni.navigateTo({
														url:"../ME/cardes?id=1"
													})
												}else{
														that.maskers=true
													that.card=res.data.message
												that.contactBankNo=0
												}
											}
										})
									}else{
										that.maskers=true
										that.contactBankNo=1
									}
								}
							})
						}
					}
				})
				this.id=i
				
			},
			maskstart(){
				var that=this
				this.maskers=false
				this.receipted=false
				this.but=1
				uni.showLoading({
				    title: '接单中！'
				});
				ajax({
					url:"/v1/driver/order/updateDriverstatus?id="+this.list[this.id].id+"&&driverstatus=2",
					method:"post",
					success(res){
						 if(res.data.status=="OK"){
						
						ajax({
						      url: "/v1/driver/order/newlist",
								method:"post",
								data:{offect:page,
							limit:10
								},
								success(res){
									 that.list=res.data.list
									 uni.hideLoading()
									
								}
								})
					}else{
						uni.hideLoading()
						if(res.data.message==null){
							uni.showToast({
							    title: "接单失败请检查认证信息",
								icon:"none"
							}) 
						}else{
							uni.showToast({
							    title: res.data.message,
								icon:"none"
							}) 
						}
							 }			
					}
				})
			
			},
			// 发车
			start(i){
				var that=this
				uni.showModal({
				    content: '请您确认是否现在发车？',				
				   success: function (res) {
				     if (res.confirm) {//这里是点击了确定以后
				   				that.but=2			
								ajax({
									url:"//v1/driver/order/updateDriverstatus?id="+that.list[i].id+"&driverstatus=3",
									method:"post",
									success(res){
										
										ajax({
										      url: "/v1/driver/order/newlist",
												method:"post",
												data:{offect:page,
											limit:10
												},
												success(res){
													 if(res.data.status=="OK"){
														 that.list=res.data.list
													 }else{
														uni.showToast({
														    title:res.data.message,
															icon:"none"
														})  
													 }
												}
												})
									}
								})
				     } else {//这里是点击了取消以后			
				      			
				     }
				   				
				   }			
				    })
			},
			// 上传回单
			staruplod(i){
				var that=this
				ajax({
					url:"/v1/appdriver/user/profile",
					success(res){
						uni.navigateTo({
							url:"./Upload?id="+that.list[i].id+"&&type="+that.list[i].type,
						})
					}
				})

			},
			// 到货确认
			startend(i){
				var that=this
			uni.showModal({
						
			    content: '请您确认货物是否送达？',
								
			  success: function (res) {
			    if (res.confirm) {//这里是点击了确定以后
			  				that.but=3		
								ajax({
									url:"//v1/driver/order/updateDriverstatus?id="+that.list[i].id+"&driverstatus=4",
									method:"post",
									success(res){
										
										ajax({
										      url: "/v1/driver/order/newlist",
												method:"post",
												data:{offect:page,
											limit:10
												},
												success(res){
													if(res.data.status=="OK"){
																that.list=res.data.list
													}else{
															uni.showToast({
																    title:res.data.message,
																	icon:"none"
														})  
													}
												}
												})
									}
								})
			    } else {//这里是点击了取消以后			
			     			
			    }
			  				
			  }			
			    })
			}
		}
	}
</script>

<style>
	.contonts{
		width: 100%;
		height: 663px;
		position: relative;
		display: flex;
		flex-direction:column ;
		align-items: center;
	}
	.loading{
		line-height: 2em;
		text-align: center;
		color: #888;
		margin-top:30px ;
	}
.receipt{
	width:355px;
	height:150px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	margin-top: 10px;
}
.reced{
	height: 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
}
.recnum{
	font-size:12px;
	color:rgba(119,131,158,1);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 7px;
	background:rgba(242,243,246,1);
	border-radius:4px;
	margin-left: 5px;
}
.butnum{
	height: 46px;
	border-top: 1px solid #F5F5F5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
.mask{
	width: 100%;
	height:100%;
	position:fixed;
	background: rgba(0,0,0,0.4);
		display: flex;
	align-items: flex-end;
	top: 0;
	left: 0;
}
.masks{
	width:375px;
	height:243px;
	background:rgba(255,255,255,1);
	border-radius:8px 8px 0px 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.masker{
	width:355px;
	height:110px;
	background:rgba(242,243,246,1);
	border-radius:8px;
	margin-top: 4px;
	font-size: 18px;
	display: flex;
	flex-direction: column;	
}
.masked{
	width:355px;
	height:100px;
	background: rgba(255,255,255,0.1);
	border-radius:8px;
	margin-top: 4px;
	display: flex;
	flex-direction: column;
}
.butone{
	width:170px;
	height:50px;
	background:rgba(242,243,246,1);
	border-radius:8px;
	color: #77839E;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	margin-top: 15px;
}
.buttwo{
	width:170px;
	height:50px;
	background:rgba(4,42,88,1);
	border-radius:8px;
	color:#FFFFFF;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	margin-top: 15px;
}
</style>
